<template>
  <div :id="props.playerId"></div>
</template>

<script setup lang="ts">
import Player from "xgplayer";
import "xgplayer/dist/index.min.css";
import { onMounted, ref } from 'vue'

interface propsType {
  url: string
  poster: string
}

const props = withDefaults(defineProps<{
  url: string,
  poster: string,
  playerId: string // 新增的 prop 用于动态设置 ID
}>(), {
  url: '',
  poster: '/images/study-with-me.jpg',
  playerId: 'mse' // 默认值，但最好在父组件中传入唯一的 ID
});

// 创建一个响应式的引用来存储Player实例
const playerInstance = ref<InstanceType<typeof Player> | null>(null);


onMounted(() => {
  playerInstance.value = new Player({
    id: props.playerId, // 使用动态 ID
    volume: 1, // 取消默认静音
    lang: "zh", //设置中文

    autoplay: false, //关闭自动播放
    // autoplayMuted: true,// 是否开启自动静音
    fluid: true,  // 流式布局，自动宽高比
    controls: true, //开启控制栏，设为false即隐藏
    leavePlayerTime: 0, //鼠标离开控制栏隐藏延时时间，默认3000ms
    download: true, //开启下载
    keyShortcut: true, //开启热键

    url: props.url, //传入的url
    poster: props.poster, //传入的视频封面

    start: {
      isShowPause: true //暂停显示播放按钮
    }

  });

});

// 导出一个函数用于设置当前视频的播放地址
const setCurrentVideoUrl = (newUrl: string) =>{
  if (playerInstance.value) {
    playerInstance.value.replay();
    playerInstance.value.switchURL(newUrl);
    playerInstance.value.play();
  } else {
    console.error('Player instance is not available.');
  }
}
// 使用 defineExpose 来暴露函数
defineExpose({
  setCurrentVideoUrl,
});

</script>

<style scoped>
#mse {
  flex: auto;
}
</style>